<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>用户管理</title>

  <!-- 引入vue -->
  <script src="../plugins/vue/vue.js" type="text/javascript" charset="utf-8"></script>
  <!-- 引用element-ui -->
  <link rel="stylesheet" href="../plugins/element-ui/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/index.css">
  <script src="../plugins/element-ui/index.js" charset="utf-8"></script>
  <!-- 引用axios -->
  <script src="../plugins/axios/axios.min.js" charset="utf-8"></script>

  <!--引入sha256算法对密码进行加密-->
  <script src="../plugins/sha256.js"></script>
  <!--自建工具类-->
  <script src="../js/utils.js"></script>

</head>
<body>

<div id="app">

  <el-menu :default-active="activeIndex" mode="horizontal">
    <el-row type="flex" class="row-bg" justify="end">
      <el-menu-item index="4">
        <el-link :underline="false" href="Login.html">重新登录</el-link>
      </el-menu-item>
    </el-row>
  </el-menu>

  <el-container>
    <el-header style="background-color: white">
      <h1>用户管理</h1>
    </el-header>

    <el-row type="flex" class="row-bg" justify="end">
      <el-form :inline="true">
        <el-form-item label="查询信息">
          <el-input
                  placeholder="请输入查询信息"
                  v-model="searchInfo"
                  clearable>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearchSubmit">查 询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="handleCreate">新 增</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-table
            v-loading="loading"
            :data="tableData"
            style="width: 100%">
      <el-table-column
              fixed
              prop="createTime"
              label="创建时间"
              width="180">
      </el-table-column>
      <el-table-column
              prop="username"
              label="账户名"
              width="120">
      </el-table-column>
      <el-table-column
              prop="name"
              label="昵称"
              width="120">
      </el-table-column>
      <el-table-column
              prop="password"
              label="SHA256密码"
              min-width="240">
      </el-table-column>
      <el-table-column
              prop="info"
              label="信息"
              min-width="200">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
  </el-container>

  <el-dialog
          title="编辑用户"
          :visible.sync="isEditing"
          width="50%"
          :before-close="handleClose">
    <el-form ref="form" :model="currentInfo" label-width="80px">
      <el-form-item label="账户名">
        <el-input placeholder="请输账户名" v-model="currentInfo.username"></el-input>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input placeholder="输入以修改密码" v-model="currentInfo.password" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input placeholder="请再次输入密码" v-model="repassword" :disabled="currentInfo.password==''"
                  show-password></el-input>
      </el-form-item>
      <el-form-item label="名字">
        <el-input placeholder="请输名字" v-model="currentInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="信息">
        <el-input placeholder="请输信息" v-model="currentInfo.info"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="isEditing = false">取 消</el-button>
        <el-button type="primary" @click="handleEditSubmit()">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog
          title="新增用户"
          :visible.sync="isCreating"
          width="50%">
    <el-form ref="form" :model="currentInfo" label-width="80px">
      <el-form-item label="账户名">
        <el-input placeholder="请输账户名" v-model="currentInfo.username"></el-input>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input placeholder="输入以修改密码" v-model="currentInfo.password" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input placeholder="请再次输入密码" v-model="repassword" :disabled="currentInfo.password==''"
                  show-password></el-input>
      </el-form-item>
      <el-form-item label="名字">
        <el-input placeholder="请输名字" v-model="currentInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="信息">
        <el-input placeholder="请输信息" v-model="currentInfo.info"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="isEditing = false">取 消</el-button>
        <el-button type="primary" @click="handleCreateSubmit()">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],
                currentPage: 1,
                total: 0,
                pageSize: 10,
                loading: true,
                isEditing: false,
                isCreating: false,
                currentInfo: {
                    id: '',
                    username: '',
                    name: '',
                    password: '',
                    info: ''
                },
                searchInfo: '',
                repassword: ''
            }
        },
        methods: {
            handleEditSubmit() {
                this.loading = true;
                this.isEditing = false;
                if (this.repassword === this.currentInfo.password) {
                    let submit = Object.assign({}, this.currentInfo)
                    if (submit.password === '') {
                        submit.password = null
                    } else {
                        submit.password = SHA256(submit.password)
                    }
                    axios.put("http://localhost:8080/userAccount/update", submit).then(
                        res => {
                            if (res.data.code === '200') {
                                this.$notify({
                                    title: '编辑用户',
                                    message: res.data.message,
                                    type: 'success'
                                });
                            }else if(res.data.code==="300"){
                                window.location.href = "Login.html";
                            } else {
                                this.$notify.error({
                                    title: '编辑失败',
                                    message: res.data.message
                                });
                            }
                            this.refresh()
                        }
                    )
                } else {
                    this.$alert('两次输入密码不相同', '编辑失败', {
                        confirmButtonText: '确定'
                    })
                }
            },
            handleClose(done) {
                done();
            },
            handleCreate() {
                this.currentInfo = {
                    username: '',
                    name: '',
                    password: '',
                    info: ''
                }
                this.repassword = ''
                this.isCreating = true;
            },
            handleCreateSubmit() {
                this.loading = true;
                this.isCreating = false;
                this.searchInfo = ''
                let submit = Object.assign({}, this.currentInfo)
                submit.password = SHA256(submit.password)
                axios.put("http://localhost:8080/userAccount/create", submit).then(
                    res => {
                        if (res.data.code === '200') {
                            this.$notify({
                                title: '创建用户',
                                message: res.data.message,
                                type: 'success'
                            });
                        }else if(res.data.code==="300"){
                            window.location.href = "Login.html";
                        } else {
                            this.$notify.error({
                                title: '创建失败',
                                message: res.data.message
                            });
                        }
                        this.refresh()
                    }
                )
            },
            handleClick(row) {
                // console.log(row);
            },
            handleEdit(index, row) {
                this.isEditing = true;
                this.currentInfo = Object.assign({}, row);
                this.currentInfo.password = '';
                this.repassword = '';
            },
            handleDelete(index, row) {
                this.loading = true;
                axios.delete("http://localhost:8080/userAccount/" + row.id).then(
                    res => {
                        if (res.data.code === '200') {
                            this.$notify({
                                title: '删除用户',
                                message: res.data.message,
                                type: 'success'
                            });
                        }else if(res.data.code==="300"){
                            window.location.href = "Login.html";
                        } else {
                            this.$notify.error({
                                title: '删除失败',
                                message: res.data.message
                            });
                        }
                        this.refresh()
                    }
                )
            },
            handleSearchSubmit() {
                this.refresh();
            },
            refresh() {
                this.loading = true;
                this.isCreating = false;
                this.isEditing = false;
                if (this.searchInfo === '') {
                    axios.get("http://localhost:8080/userAccount/page/" + this.currentPage + "/count/" + this.pageSize).then(
                        res => {
                            if(res.data.code==='200') {
                                this.tableData = res.data.data.records;
                                this.total = res.data.data.total;
                                this.loading = false;
                            }else if(res.data.code==="300"){
                                window.location.href = "Login.html";
                            }else{
                                this.$notify.error({
                                    title: '查询失败',
                                    message: res.data.message
                                });
                            }
                        }
                    )
                } else {
                    axios.get("http://localhost:8080/userAccount/page/" + this.currentPage + "/count/" + this.pageSize + "/with/" + this.searchInfo).then(
                        res => {
                            if(res.data.code==='200') {
                                this.tableData = res.data.data.records;
                                this.total = res.data.data.total;
                                this.loading = false;
                            }else if(res.data.code==="300"){
                                window.location.href = "Login.html";
                            }else{
                                this.$notify.error({
                                    title: '查询失败',
                                    message: res.data.message
                                });
                            }
                        }
                    )
                }
            },
            handleSizeChange(newSize) {
                this.currentPage = Math.trunc(((this.currentPage - 1) * this.pageSize + 1) / newSize) + 1
                this.pageSize = newSize
                this.refresh()
            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage
                this.refresh()
            }
        },
        created() {
            this.refresh()
            let name = getCookie("name");
            if (name===null) {
                window.location.href = "Login.html";
            } else {
                this.$notify({
                    title: '登录成功',
                    message: "欢迎回来，"+ name,
                    type: 'success'
                });
            }
        }
    })
</script>
</body>
</html>